Lyssa's Websets are linkware. Please include
this matching logo on every page you use any of the
elements on and link it to http://www.fortunecity.com/rivendell/rhydin/713/goodies.html.
You can place the logo anywhere so long as it is on
the same page as the element(s). Click on the link
or graphic when you are ready to return to Goodies
of the Realm.
This
is a set I made when I got tired of the
beautiful but slow-loading and difficult to work
with Moyra's Web Jewels set that had previously
been used for my website. I wanted something
fanciful to capture the mood of Lyssa's Realm of
Fantasy, and the white background allowed me to
get dramatic with my elements without looking
too crowded, plus I was able to control and
optimize file size so the graphics looked great
but loaded sometime before the reader fell
asleep at the keyboard.
You'll find a few basic web
design tips below to help you use your layout
effectively with this and other sets. I've
assumed on this that you either already know the
10 basic HTML tags or have a WYSIWIG HTML editor
to handle that part for you, such as Claris Home
Page, Netscape Communicator, or Adobe PageMill.
I'd recommend these if you're like me and like
to write in HTML and then get instant one-click
viewing to check your layout. Text-only HTML
editors are good for text only pages, but hey,
we want the eye candy,
right?
This
is a bordered background, so you'll need to take
that into consideration in your layout to keep from
having your elements run over the border picture.
The trick here is to make your very first element
spacer.gif (see below). You need to make it wide
enough to cover the border area but make sure it
has no visible border itself. The tag for this page
looks like <IMG SRC="spacer.gif" WIDTH=100
HEIGHT=500 BORDER=0 ALIGN=left>. Note that the
alignment is left, making your next element appear
immediately next to the spacer.gif graphic. Next,
you will want to create a page table, which will be
a single row, single column, fixed width table
immediately following your spacer.gif. In this
case, I used the tag <TABLE BORDER=0
CELLPADDING=3 WIDTH=650>. A border of 0 gives us
an invisible table. Remember, padding is the number
of pixels between data in a cell and the border,
spacing is the amount of space between cells. Since
there is only one cell, the spacing attribute is
not needed. A fixed width keeps the page table from
running over a second horizontal tiling of your
background graphic even with different browser and
monitor settings. You will want to leave out the
height attribute so that viewers who alter the font
size or any other aspect of your page when veiwing
will not lose elements. Once you have your page
table completed, arrange all of your visible
elements inside of it as if it were a page on a
normally tiled or non-graphical background. Hey,
you've conquered nesting tables! Go tell people
you're not just a web publisher, you're a web
designer! Okay, there's a bit more to complex
website layout, but nesting tables is probably the
biggest trick you'll ever need for a simple page,
so you're sitting prettier than a lot of the people
out there with ho-hum pages.
This
is the mystical, magical spacer.gif. Learn it, use
it, love it, it can be your best friend in webpage
layout. Normally it is invisible, but I've put a
border on it so you can see it. It's simply a blank
graphic that can be used to create empty space
within your webpage. Be sure not to give it any
extra html attributes like I did here so that
nothing will show up when someone runs their mouse
over it. The tag used for this spacer is <IMG
SRC="spacer.gif" ALT="This is a spacer.gif."
WIDTH=100 HEIGHT=100 BORDER=3 ALIGN=right> but
to make it invisible, use a border of 0. Use this
spacer.gif to create empty space wherever you would
like but do not wish to use a table. (Hint, there
are actually two spacer.gifs used here. One is
invisible and was used to create space between the
graphic and the text.) Spacers can also be used
within a table, or anywhere you want to seperate
elements invisibly. Now that you've got nesting
tables and spacer graphics mastered, you can create
slightly more controlled looking web pages without
having to master CSS1, CSS2, DHTML.. yeah, all the
stuff that makes you dizzy and keeps you from
thinking you'll ever have a page look the way you
want it to. (Psst, once you've played with the
tricks of basic HTML for a while, go ahead and get
a book or two on the heavier stuff. It's really not
as hard as it looks, and soon you'll be cascading
and javascripting like a pro.)
Here's
a neat tip for creating smooth and neat looking
text that appears to flow around an object using
basic HTML. Insert a graphic in front of your text
and give it the alignment attribute ALIGN=left or
ALIGN=right. This is useful for creating the look
of paragraph indentation, as was done here. The tag
I used looks like <IMG SRC="realmmagnify.gif"
WIDTH=50 HEIGHT=65 ALIGN=left>. (Note that I
included the image width and height, even though
those are the actual dimensions of the image. This
loads the size of the image in along with the text
and keeps your text from jumping around as graphics
load. You want to include dimensions in your HTML
whenever possible.) You can use this trick with a
graphic of the first letter in your text to mimic
old manuscripts, or try using the spacer.gif to
create an invisible indentation, like you'll see in
the next paragraph.
Be
sure to keep the height of the spacer.gif small
enough so that it only covers one line of text,
even with different font size settings. The tag on
this one is <IMG SRC="spacer.gif" WIDTH=20
HEIGHT=2 BORDER=0 ALIGN=left>. Align the text so
that it is on the same side of the page as your
indentation element. You may also want to put each
paragraph in a seperate cell of a table, as was
done here, to keep them from accidental overlaps.
Note that even if you are using an alignment of
right, you want to insert your graphic in front of
the text. Objects aligned to the right will proceed
in order from right to left on the page, so insert
the item you want furthest to the right in
front.
Subtitles
Use these subtitles to link to other pages in your
website.
Blank Titles
Use these blank titles to create your own custom title
graphic by layering text over the image.
Graphic Rules
Use these for graphics seperation of the sections of your
page.
This
is a bordered background, so you'll need to take
that into consideration in your layout to keep from
having your elements run over the border picture.
The trick here is to make your very first element
spacer.gif (see below). You need to make it wide
enough to cover the border area but make sure it
has no visible border itself. The tag for this page
looks like <IMG SRC="spacer.gif" WIDTH=100
HEIGHT=500 BORDER=0 ALIGN=left>. Note that the
alignment is left, making your next element appear
immediately next to the spacer.gif graphic. Next,
you will want to create a page table, which will be
a single row, single column, fixed width table
immediately following your spacer.gif. In this
case, I used the tag <TABLE BORDER=0
CELLPADDING=3 WIDTH=650>. A border of 0 gives us
an invisible table. Remember, padding is the number
of pixels between data in a cell and the border,
spacing is the amount of space between cells. Since
there is only one cell, the spacing attribute is
not needed. A fixed width keeps the page table from
running over a second horizontal tiling of your
background graphic even with different browser and
monitor settings. You will want to leave out the
height attribute so that viewers who alter the font
size or any other aspect of your page when veiwing
will not lose elements. Once you have your page
table completed, arrange all of your visible
elements inside of it as if it were a page on a
normally tiled or non-graphical background. Hey,
you've conquered nesting tables! Go tell people
you're not just a web publisher, you're a web
designer! Okay, there's a bit more to complex
website layout, but nesting tables is probably the
biggest trick you'll ever need for a simple page,
so you're sitting prettier than a lot of the people
out there with ho-hum pages.
Here's
a neat tip for creating smooth and neat looking
text that appears to flow around an object using
basic HTML. Insert a graphic in front of your text
and give it the alignment attribute ALIGN=left or
ALIGN=right. This is useful for creating the look
of paragraph indentation, as was done here. The tag
I used looks like <IMG SRC="realmmagnify.gif"
WIDTH=50 HEIGHT=65 ALIGN=left>. (Note that I
included the image width and height, even though
those are the actual dimensions of the image. This
loads the size of the image in along with the text
and keeps your text from jumping around as graphics
load. You want to include dimensions in your HTML
whenever possible.) You can use this trick with a
graphic of the first letter in your text to mimic
old manuscripts, or try using the spacer.gif to
create an invisible indentation, like you'll see in
the next paragraph.
